<template>
    <el-drawer v-model="show" title="手工录入报警事件" :size="500" :class="$style['drawer-container']" :append-to-body="true"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <el-form ref="addFormRef" :model="addForm" label-width="auto" :class="$style['form-wrapper']" :rules="rules">
            <el-form-item label="事件名称" prop="event_name">
                <el-input v-model="addForm.event_name" placeholder="事件名称" clearable />
            </el-form-item>
            <el-form-item label="设备名称">
                <el-select v-model="device_index" filterable remote reserve-keyword placeholder="输入设备名称检索"
                    remote-show-suffix :remote-method="remoteMethod" :loading="loading" @change="changeDevice"
                    clearable>
                    <el-option v-for="(item, index) in options" :key="index" :label="item.device_name" :value="index" />
                </el-select>
            </el-form-item>
            <el-form-item label="事件分类" prop="event_type">
                <el-select v-model="addForm.event_type" placeholder="事件分类" clearable @change="changeType">
                    <el-option v-for="(item, index) in event_types" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="事件等级" prop="event_level">
                <el-select v-model="addForm.event_level" placeholder="事件等级" clearable @change="changeLevel">
                    <el-option v-for="(item, index) in event_levels" :key="index" :label="item.name" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="发生时间" prop="event_time">
                <el-date-picker v-model="addForm.event_time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss" placeholder="事件发生时间" style="width:100%" />
            </el-form-item>
            <el-form-item label="发生位置">
                <el-input v-model="addForm.dvc_installation" placeholder="发生位置" clearable />
            </el-form-item>
            <el-form-item label="所在区域">
                <el-cascader :options="areaTreeData" v-model="area_index" :props="defaultProps" placeholder="请选择地图"
                    @change="areaChange" style="width:100%" />
            </el-form-item>
            <el-form-item label="事件描述">
                <el-input type="textarea" v-model="addForm.event_desc" rows="3" style="width:100%;"
                    placeholder="事件描述" />
            </el-form-item>
        </el-form>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { fetchBasicByName, fetchAreaTree } from '@/api/device.services'
import { fetchEventCreate } from '@/api/event.services'
const emits = defineEmits(['success'])
const addForm = ref({})
const addFormRef = ref(null)
const rules = reactive({
    event_name: [{ required: true, message: '请输入事件名称', trigger: 'blur' }],
    event_type: [{ required: true, message: '请选择事件分类', trigger: 'change' }],
    event_level: [{ required: true, message: '请选择事件等级', trigger: 'change' }],
    event_time: [{ required: true, message: '请选择事件发生时间', trigger: 'change' }]
})

const device_index = ref(null)
const options = ref([])
const loading = ref(false)
const remoteMethod = async (query) => {
    try {
        if (!query) {
            options.value = []
            return
        }
        loading.value = true
        const params = {
            device_name: query
        }
        const result = await fetchBasicByName(params)
        if (result.code == 1) {
            loading.value = false
            options.value = result.data
        }
    } catch (error) {
        loading.value = false
    }
}
const changeDevice = (index) => {
    const item = options.value[index]
    addForm.value.device_id = item.id || null
    addForm.value.device_name = item.device_name || null
    addForm.value.device_code = item.device_code || null
    addForm.value.model_id = item.model_id || null
    addForm.value.node_id = item.node_id || null
    addForm.value.node_name = null
}

const event_types = ref([])
const event_levels = ref([])
const changeType = () => {
    if (!addForm.value.event_type) return
    const item = event_types.value.find(item => item.id == addForm.value.event_type)
    addForm.value.event_type_name = item.name
}
const changeLevel = () => {
    if (!addForm.value.event_level) return
    const item = event_levels.value.find(item => item.id == addForm.value.event_level)
    addForm.value.event_level_name = item.name
    addForm.value.event_color = item.color
}
const onSubmit = async () => {
    const valid = addFormRef.value.validate()
    if (!valid) return
    const result = await fetchEventCreate(addForm.value)
    if (result.code == 1) {
        show.value = false
        ElMessage.success('添加成功')
        emits('success')
    }
}
const show = ref(false)
const open = (types, levels) => {
    device_index.value = null
    addForm.value = {}
    event_types.value = types
    event_levels.value = levels
    show.value = true
}
const areaTreeData = ref([])
const defaultProps = {
    label: "name",
    value: "id",
    children: "children",
    checkStrictly: true,
    emitPath: false
}
const area_index = ref(null)
const areaChange = (index) => {
    if (!index) {
        addForm.value.area_id = null
        addForm.value.area_name = null
        addForm.value.area_code = null
    } else {
        const item = areaTreeData.value[index]
        addForm.value.area_id = item.id
        addForm.value.area_name = item.name
        addForm.value.area_code = item.code
    }
}
onMounted(async () => {
    const result = await fetchAreaTree()
    if (result.code == 1) {
        areaTreeData.value = result.data
    }
})
defineExpose({
    open
})
</script>
<style lang="scss" module>
.drawer-container {
    & [class~="el-drawer__header"] {
        margin-bottom: 10px;
    }

    & [class~="el-drawer__body"] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 20px;
    }
}

.form-wrapper {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;

    @include scrollbar;

    & [class~="el-form-item"] {
        margin-bottom: 18px;
    }
}
</style>